<template>
    <div>
        <Button type="primary" @click="modalFrom=true" style="margin-right: 15px;">增加数据</Button>
        <Button type="primary" @click="removeMore" style="margin-right: 15px;">删除多个</Button>
        <Input search placeholder="搜索问题" :style="{width:'225px'}" @on-search="onSearch" />

        <Table border :columns="columns" :data="data" @on-selection-change="onSelectChange" style="margin: 15px 0;"></Table>
        <Page :total="total" :page-size="rows" @on-change='onChangePage' :page-size-opts=[5,10,15,20] @on-page-size-change="onPageSizeChange" show-sizer />

        <Modal
        v-model="modalFrom"
        title="数据操作">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="Quest" prop="quest">
            <Input v-model="formValidate.quest" placeholder="请添加问题"></Input>
        </FormItem>
        <FormItem label="Solve" prop="solve">
            <Input v-model="formValidate.solve" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请添加模板答案"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
    <div slot="footer">
        温馨提示!
    </div>
    </Modal>
    
    </div>
</template>
<script>
    export default {
        data () {
            return {
                formValidate: {
                    quest: '',
                    solve: ''
                },
                ruleValidate: {
                    quest: [
                        { required: true, message: '请添加问题', trigger: 'blur' }
                    ],
                    solve: [
                        { required: true, message: '请添加模板答案', trigger: 'blur' },
                        { type: 'string', min: 10, message: 'Introduce no less than 20 words', trigger: 'blur' }
                    ]
                },
                columns: [
                    {
                        type : 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '问题',
                        key: 'quest',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.quest)
                            ]);
                        }
                    },
                    {
                        title: '解决方案',
                        key: 'solve'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row._id)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row._id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data: [],
                total:0,
                page:1,
                rows:5,
                modalFrom:false,
                ids:[],
            }
        },
        methods: {
            onSelectChange(selections){
                var ids = [];
                for (let i = 0; i < selections.length; i++) {
                    ids.push(selections[i]._id);
                }
                this.ids = ids.toString();
            },
            removeMore(){
                this.$Modal.confirm({
                    title  : '确认操作',
                    content: '<p>你确认删除该记录吗?</p>',
                    onOk   : () => {
                    this.axios({
                        url   : `http://10.31.162.84:3000/helps/data/removes`,
                        method: 'post',
                        data  : {
                        ids: this.ids
                        }
                    }).then(res => {
                        this.getData();
                    });
                    },
                    onCancel: () => {
                    this.$Message.info('Clicked cancel');
                    }
                });
            },
            edit (_id) {
                this.axios({
                    url:`http://10.31.162.84:3000/helps/data/${_id}`,
                    method:"get"
                }).then(res=>{
                    this.modalFrom=true;
                    this.formValidate=res.data;
                })
            },
            remove (_id) {
                this.$Modal.confirm({
                    title: '确认操作',
                    content: '<p>你确认删除嘛？</p>',
                    onOk: () => {
                        this.axios({
                            url:`http://10.31.162.84:3000/helps/data/${_id}`,
                            method:"delete"
                        }).then(res=>{
                            this.getData()
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('Clicked cancel');
                    }
                });
            },
            getData(){
                this.axios({
                    url:'http://10.31.162.84:3000/helps/list',
                    method:"post",
                    data:{
                        page:this.page,
                        rows:this.rows
                    }
                }).then(res=>{
                    this.total=res.data.total;
                    this.data=res.data.rows;
                })
            },
            onChangePage(page){
                this.page=page;
                this.getData();
            },
            onPageSizeChange(rows){
                this.rows=rows;
                this.getData();
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.formValidate._id){
                            this.axios({
                            url:`http://10.31.162.84:3000/helps/data/${this.formValidate._id}`,
                            method:"put",
                            data:this.formValidate,
                            }).then(res=>{
                                this.modalFrom=false;
                                this.getData();
                                this.$data.formValidate = this.$options.data().formValidate;
                                this.formValidate= {};
                            })
                        }else{
                            // console.log(this.formValidate);
                            this.axios({
                            url:`http://10.31.162.84:3000/helps/data`,
                            method:"post",
                            data:this.formValidate,
                            }).then(res=>{
                                this.modalFrom=false;
                                this.getData();
                            })
                        }
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            onSearch(value) {
                this.axios({
                    url: `http://10.31.162.84:3000/helps/list`,
                    method: 'post',
                    data: {
                        quest: value,
//                      page:this.page,
                        rows:this.rows
                         }
                    }).then(res => {
                        this.total=res.data.total;
                        this.data=res.data.rows;
                    });
                }
            },
        mounted(){
            this.getData();
        },
    }
    
</script>
